<template>
  <div class="app-container">
    <div class="app-main">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="白蚁灭治任务单" name="first"></el-tab-pane>
        <el-tab-pane label="人员信息" name="second"></el-tab-pane>
        <el-tab-pane label="企业档案" name="third"></el-tab-pane>
        <!-- <el-tab-pane label="监测项目审核" name="fourth"></el-tab-pane> -->
      </el-tabs>
      <taskList v-if="activeName == 'first'"></taskList>
      <personList v-if="activeName == 'second'"></personList>
      <archivesList v-if="activeName == 'third'"></archivesList>
      <!-- <reviewList v-if="activeName == 'fourth'"></reviewList> -->
    </div>
  </div>
</template>

<script>
import {
  queryMonitorPointTermite, // 项目列表-有蚁
  queryHandleLog, // 查询处理日志
  termiteHandle // 有蚁列表->有蚁处理
} from "@/api/manage/asset";
import taskList from './components/taskList'
import personList from './components/personList'
import archivesList from './components/archivesList'
import reviewList from './components/reviewList'
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "antList",
  dicts: [],
  components: { taskList, personList, archivesList, reviewList },
  data() {
    return {
      activeName: "first",
      voucherVisible: false,
      imgUrl: "",
      id: null,
      submitForm: {
        pointNumber: "",
        monitorName: "",
        projectName: "",
        controlName: "",
        relay: "",
        rssi: "",
        snr: "",
        voltage: "",
        photoTermite: "",
        photoControl: "",
        detailSituation: "",
        reasonAlarm: ""
      },
      bindCompanyShow: 1,
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      messageTotal: 0,
      // 资产信息表格数据
      assetList: [],
      messageList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 资产分类树桩选项
      assetClassificationOptions: [],
      // 启用日期时间范围
      daterangeStartDate: [],
      // 部门树桩选项
      deptOptions: [],
      // 归属账号下拉选项
      statusList: [
        {
          value: "有蚁",
          label: "有蚁"
        },
        {
          value: "处理中",
          label: "处理中"
        },
        {
          value: "待上传",
          label: "待上传"
        }
      ],
      specificList: [
        {
          value: "是",
          label: "是"
        },
        {
          value: "否",
          label: "否"
        }
      ],
      reasonList: [
        {
          value: "木材腐烂",
          label: "木材腐烂"
        },
        {
          value: "人为破坏",
          label: "人为破坏"
        },
        {
          value: "设备调试",
          label: "设备调试"
        },
        {
          value: "模块更换",
          label: "模块更换"
        },
        {
          value: "其他昆虫",
          label: "其他昆虫"
        }
      ],
      // 是否显示二维码弹出层
      getCodeUrlOpen: false,
      // 打印弹出层
      openPrint: false,
      assets: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
        // status: "",
        // projectName: "",
        // pointNumber: "",
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      // 导入结果弹出框
      resultVisible: false,
      // 人员下拉
      personnels: [],
      // 部门下拉
      departments: []
    };
  },
  created() {
    // this.getList();
  },
  methods: {
    handleClick(tab, event) {
        console.log(tab, event);
      },
    enSure() {
      termiteHandle(this.submitForm)
        .then(res => {
          if (res.errorCode == "000000") {
            this.$modal.msgSuccess("处理成功！");
          }
        })
        .finally(() => {
          this.bindCompanyShow = 1;
        });
      console.log(this.submitForm);
    },
    cancel() {
      this.bindCompanyShow = 1;
    },
    refresh() {},
    handleSelectionChange(val) {
      console.log(val, "00000");
    },
    indexMethod(index) {
      return index + 1;
    },
    dispose(row) {
      // 在这里调接口获取详情
      this.bindCompanyShow = 2;
      console.log(row);
      this.submitForm = row;
    },
    seeLog(row) {
      console.log(row);
      this.bindCompanyShow = 3;
      queryHandleLog({ id: row.pointId }).then(res => {
        if (res.errorCode == "000000") {
          this.messageList = res.data.list;
          this.messageTotal = this.messageList.length;
        }
      });
    },
    message(row) {},
    deleteItem(row) {
      console.log(row);
    },
    cancelMessage() {
      console.log("cancelMessage");
      this.bindCompanyShow = 1;
    },
    // addMessage() {
    //   console.log("addMessage");
    // },
    messageEdit(row) {
      this.imgUrl = row.voucher;
      this.voucherVisible = true;
    },


    /** 二维码按钮操作 */
    getCodeUrl(row) {
      this.reset();
      this.getCodeUrlOpen = true;
      this.title = "rfid编码（" + row.rfidCode + ")";
      // 生成二维码
      this.$nextTick(function() {
        console.log(document.getElementById("qrCodeUrl"));
        document.getElementById("qrCodeUrl").innerHTML = "";
        let qrCodeUrl = new QRCode("qrCodeUrl", {
          width: 200,
          height: 200,
          text: row.rfidCode,
          colorDark: "#000000",
          colorLight: "#fff"
        });
      });
    },
    /*部门树桩选项*/
    getTreeselect() {
      treeSelect().then(response => {
        this.deptOptions = response.data;
      });
    },
    getMessageList() {
      console.log("获取短信列表");
    },
    /** 查询资产信息列表 */
    getList() {
      this.loading = true;
      queryMonitorPointTermite(this.queryParams)
        .then(res => {
          console.log(res, "23232");
          if (res.errorCode == "000000") {
            this.assetList = res.data.list;
            this.total = res.data.total;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 表单重置
    reset() {
      this.form = {
        id: null,
        assetName: null,
        assetCode: null
      };
      this.resetForm("form");
      this.openPrint = false;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.reset();
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除资产信息编号为"' + ids + '"的数据项？')
        .then(function() {
          return delAsset(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.app-main {
  background-color: #fff;
  // padding: 15px 20px;
  border-radius: 8px;
  .btnGroupLeft {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;
  }
  .spanRight {
    font-size: 12px;
    color: #303133;
    .red {
      color: red;
    }
    .blue {
      color: blue;
    }
    .yellow {
      color: #ffc14b;
    }
    .green {
      color: green;
    }
  }
  .formBox {
    .left {
      display: inline-block;
      height: 44px;
      line-height: 44px;
      width: 100px;
      padding-right: 15px;
      border-left: 1px solid #e4e4dc;
      border-right: 1px solid #e4e4dc;
      font-family: MicrosoftYaHei;
      font-size: 12px;
      color: #303133;
      text-align: right;
      vertical-align: top;
    }
    .right {
      display: inline-block;
      width: calc(100% - 100px);
      height: 44px;
      line-height: 32px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #303133;
      border-right: 1px solid #e4e4dc;
      padding: 6px 15px;
      .el-select {
        width: 340px !important;
      }
      .el-input {
        width: 340px !important;
      }
    }
    .formHead {
      width: 100%;
      height: 44px;
      background-color: #5d6d7f;
      height: 44px;
      line-height: 44px;
      text-align: center;
      font-family: MicrosoftYaHei, MicrosoftYaHei;
      font-weight: bold;
      font-size: 12px;
      color: #ffffff;
    }
    .formWhite {
      width: 100%;
      height: 44px;
      background-color: #fff;
      border-bottom: 1px solid #dcdfe6;
    }
    .area {
      .areaLeft {
        width: 130px !important;
        margin-right: 10px;
      }
      .areaRight {
        width: 200px !important;
      }
    }
    .formGray {
      width: 100%;
      height: 44px;
      background-color: #dbe2e6;
    }
  }
  .mainName {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    color: #000000;
    border-bottom: 1px solid #dcdfe6;
    margin-bottom: 10px;
  }
  .headerTable {
    background: #5d6d7f;
    height: 48px;
    line-height: 48px;
    text-align: center;
    width: 100%;
    color: #fff;
    font-weight: Bold;
    font-size: 14px;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
      Microsoft YaHei, Arial, sans-serif;
    border: 1px solid #e3e3e3;
    border-bottom: 0;
  }
}
.el-collapse .el-collapse-item__header {
  font-size: 16px;
  font-weight: bold;
}

.pagination-container {
  margin-top: 20px;
  width: 100%;
}

.pagination-container .el-pagination {
  display: flex;
  justify-content: center;
  width: 100%;
}
</style>
